<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入 Vue.js -->
    <script src="js/vue.js"></script>
    <!-- 引入 Element UI 组件库 -->
    <script src="js/elementui.js"></script>
    <!-- 引入 Axios 用于 HTTP 请求 -->
    <script src="js/axios.js"></script>
    <!-- 引入自定义的公共脚本文件 -->
    <script src="js/common.js"></script>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div id="app">
        <template>
            <!-- 页面标题 -->
            <h1 style="text-align: center;">用户维护</h1>
            <!-- 用户表格，使用 Element UI 的 el-table 组件 -->
            <el-table :data="tableData" border style="width: 100%">
                <!-- ID 列 -->
                <el-table-column prop="id" label="ID" width="180">
                </el-table-column>
                <!-- 姓名列 -->
                <el-table-column prop="uname" label="姓名" width="180">
                </el-table-column>
                <!-- 密码列 -->
                <el-table-column label="密码">
                    <template slot-scope="scope">
                       ******
                    </template>
                </el-table-column>
                <!-- 操作列 -->
                <el-table-column label="操作">
                    <!-- 表头区域，包含新增按钮 -->
                    <template slot="header" slot-scope="scope">
                        <!-- 新增菜单按钮 -->
                        <el-button type="primary" @click="handleAdduser(scope.$index, scope.row)">新增</el-button>
                    </template>
                    <!-- 每行的操作按钮 -->
                    <template slot-scope="scope">
                        <!-- 修改按钮 -->
                        <el-button type="primary" @click="handleupduser(scope.$index, scope.row)">修改</el-button>
                        <!-- 分配职位按钮 -->
                        <el-button type="primary" @click="handleAdd(scope.$index, scope.row)">分配职位</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <!-- 对话框，用于新增或修改用户信息 -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <!-- 用户表单 -->
            <el-form :model="user">
                <!-- 用户名称输入框 -->
                <el-form-item label="用户名称">
                    <el-input v-model="user.uname" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 用户密码输入框 -->
                <el-form-item label="用户密码">
                    <el-input v-model="user.upwd" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 抽屉组件，用于分配角色 -->
        <el-drawer title="分配角色" :visible.sync="drawer">
            &nbsp;
            <el-button type="primary" @click="handleupd">确定分配角色</el-button>&nbsp;
            <!-- 树形控件，用于选择职位 -->
            <el-tree :data="rolelist" ref="tree" show-checkbox default-expand-all node-key="id" ref="tree"
                highlight-current>
            </el-tree>
        </el-drawer>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [], // 用户表格数据
            drawer: false, // 控制分配职位抽屉的显示状态
            title: "", // 对话框标题
            user: { // 当前操作的用户信息
                id: 0,
                uname: "",
                upwd: ""
            },
            id: 0,
            rolelist: [],
            dialogFormVisible: false // 控制对话框的显示状态
        },
        methods: {
            // 初始化用户数据
            initTreeData() {
                axios.get(API + "getAllUser").then(res => {
                    console.log(res);
                    this.tableData = res.data.data.list; // 更新用户表格数据
                })
                axios.get(API + "getAllRole").then(res => {
                    let rolelist=[];
                    //循环将值传入角色列表
                    for (let i = 0; i < res.data.data.roles.length; i++) {
                        rolelist.push({
                            id: res.data.data.roles[i].id,
                            label: res.data.data.roles[i].rolename
                        });
                    }
                    this.rolelist = rolelist;
                })
            },
            handleupd() {
                let treeNowArr = this.$refs.tree.getCheckedKeys();//获取树当前选中节点
                console.log(treeNowArr);
                
                axios.post(API + "updateRoleIdByUserId", { userId: this.id, roleId: treeNowArr }).then(res => {
                    if (res.data.data.b) {
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.$nextTick(() => {
                            this.initTreeData(); // 刷新用户列表
                        });
                    } else {
                        this.$message({
                            type: 'error',
                            message: '修改失败!'
                        });
                    }
                    this.drawer=false
                })
            },
            // 新增用户
            handleAdduser(index, row) {
                this.title = "新增用户";
                this.dialogFormVisible = true;
                this.user = {
                    id: 0,
                    uname: "",
                    upwd: ""
                };
            },
            // 打开分配职位抽屉
            handleAdd(index, row) {
                this.id = row.id;
                this.drawer = true;
                //根据用户id查询角色id
                axios.get(API + "selectroleIdByUserId?userId=" + row.id).then(res => {
                    let slist = res.data.data.roleId
                    console.log(slist);
                    let arr = slist.map(obj => obj.roleid)
                    this.$refs.tree.setCheckedKeys(arr);
                });
                axios.get(API+"selectRoleByUserId/"+row.id).then(res=>{
                    console.log("用户11",res);
                })
            },
            // 修改用户
            handleupduser(index, row) {
                this.title = "修改用户";
                this.dialogFormVisible = true;
                this.user = row; // 将当前行的用户信息赋值给 user
            },

            // 添加或修改用户
            add() {
                if (this.user.id != 0) { // 判断是否为修改操作
                    axios.post(API + "updateUser", this.user).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogFormVisible = false;
                            this.$nextTick(() => {
                                this.initTreeData(); // 刷新用户列表
                            });
                        } else {
                            this.$message({
                                message: '修改失败',
                                type: 'error'
                            });
                        }
                    });
                } else { // 新增操作
                    axios.post(API + 'addUser', this.user).then(res => {
                        if (res.data.data.b) {
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.$nextTick(() => {
                                this.initTreeData(); // 刷新用户列表
                            });
                        } else {
                            this.$message({
                                type: 'error',
                                message: '添加失败!'
                            });
                        }
                    });
                }
                this.dialogFormVisible = false;
            }
        },
        mounted() {
            this.initTreeData(); // 页面加载时初始化用户数据
        }
    });
</script>

</html>